<template>
	<div class="user_info">
		<van-nav-bar
		  fixed
		  border
		  title="我的资料"
		  left-arrow
		  @click-left="goBack"
		/>
		<div class="user_box">
			<div class="user_head">
				<van-image
				  width="80"
				  height="80"
				  fit="cover"
				  round
				  :src="user.portrait"
				/>
			</div>
			<div class="scop">
				<van-cell title="昵称" :value="user.nickname" is-link />
				<van-cell title="姓名" :value="user.name" is-link />
				<van-cell title="手机号" :value="user.mobile" is-link />
				<van-cell title="绑定账号" value="修改绑定账号" to="/login" is-link />
			</div>
			
			<van-button color="#1375ff" class="fillet" block @click="relieve">退出并解除绑定</van-button>
		</div>
	</div>
</template>

<script>
import wx from "weixin-js-sdk";
import {NavBar,Image,Cell,CellGroup,Button} from "vant"
import {wechatMain,wechatUnbind} from "@/api/index"
export default{
	components:{
		[NavBar.name]:NavBar,
		[Image.name]:Image,
		[CellGroup.name]:CellGroup,
		[Cell.name]:Cell,
		[Button.name]:Button,
	},
	data(){
		return{
			user:[]
		}
	},
	async mounted() {
		this.user =await wechatMain()	
	},
	methods:{
		goBack(){
			this.$router.back()
		},
		relieve(){
			this.$dialog.confirm({
			  title: '温馨提示',
			  message: '解绑后无法接受到账单消息，是否确定解绑',
			})
			  .then(async() => {
			    // on confirm
				const res = await wechatUnbind()
				WeixinJSBridge.call('closeWindow');
				this.$router.replace("/")
			  })
			  .catch(() => {
			    // on cancel
				console.log("cancel")
			  });
		}
	}
}		
</script>

<style scoped lang="less">
.user_info{
	position: fixed;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	overflow-y: auto;
	background-color: #fff;
	.user_box{
		margin:70px auto;
		.user_head{
			text-align: center;
		}
	}
	.scop{
		margin:30px auto;
		border-bottom:10px solid #f1f1f1;
		.van-cell{
			padding:15px 16px;
		}
	}
}	
.van-button{
	border-radius:10px;
}
.van-button--block {
    display: block;
    width: 92%;
    margin:20px auto;
}

@media (min-width:750px) {
	.user_info{
		position: fixed;
		width: 100%;
		height: 100%;
		top:0;
		left: 0;
		overflow-y: auto;
		background-color: #fff;
		.user_box{
			margin:70px auto;
			.user_head{
				text-align: center;
			}
		}
		.scop{
			margin:30px auto;
			border-bottom:4px solid #f1f1f1;
			.van-cell{
				padding:15px 16px;
			}
		}
	}	
	.van-button{
		border-radius:10px;
	}
	.van-button--block {
	    display: block;
	    width: 92%;
	    margin:20px auto;
	}
}
</style>
